<template>
	<view style="padding: 0 10rpx;">
		<uni-section title="基础信息" type="line"></uni-section>
		<uni-forms style="width: 95%; margin: 10rpx auto;"
		ref="baseForm" 
		:rules="rules" 
		labelAlign="left" 
		:modelValue="baseFormData.team">
			<uni-forms-item label-align="right" label="名称:" required name="name">
				<uni-easyinput :disabled="isEdit" v-model="baseFormData.team.name" placeholder="请输入团队名称" />
			</uni-forms-item>
			<uni-forms-item label-align="right" label="Logo:">
				<robby-image-upload v-model="baseFormData.images" 
				@delete="deleteImage" 
				limit="1"
				@add="addImage"></robby-image-upload>
			</uni-forms-item>
			<uni-forms-item label-align="right" label="备注:">
				<uni-easyinput type="textarea" v-model="baseFormData.team.note" placeholder="请输入备注" />
			</uni-forms-item>
			<uni-forms-item label-align="right" label="流程控制:">
				<switch :checked="baseFormData.team.openControl == 'CLOSE' ? false : true" />
				<button id="switch-button"
				type="default" 
				:plain="true"
				@click="changeOpenControl"
				></button>
			</uni-forms-item>
			<uni-forms-item label-align="right" label="审核步骤:" name="audit" v-if="baseFormData.team.openControl == 'OPEN'">
				<uni-easyinput v-model="baseFormData.team.auditLevel" placeholder="请输入审核总步骤" />
			</uni-forms-item>
		</uni-forms>
		<button type="primary" @click="submit" style="background-color: #007aff;">提交</button>
	</view>
</template>

<script>
	
	import robbyImageUpload from '@/components/robby-image-upload/robby-image-upload.vue'
	export default {
	    components: {robbyImageUpload},
		data() {
			return {
				isEdit: false,
				isClickUpload: false,
				baseFormData: {
					team: {
						id: '',
						name: '',
						note: '',
						avatar: '',
						avatarUrl: '',
						owner: '',
						openControl: 'CLOSE',
						auditLevel: 0,
						reimVerify: ''
					},
					images:[]
				},
				imageList: [],
				fileList: [],
				delId: [],
				fileIds: [],
				imgStyle: {
					"height": 100,   // 边框高度
					"width": 100,    // 边框宽度
					"border":{ // 如果为 Boolean 值，可以控制边框显示与否
						"color":"#eee",     // 边框颜色
						"width":"1px",      // 边框宽度
						"style":"solid",    // 边框样式
						// "radius":"50%"      // 边框圆角，支持百分比
					}
				},
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '名称不能为空'
						}]
					}
				}
			}
		},
		onLoad() {
		},
		onShow(){
			this.initData();
		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.baseForm.setRules(this.rules)
		},
		onShareAppMessage(res) {
		    if (res.from === 'button') {// 来自页面内分享按钮
		      console.log(res.target)
		    }
		    return {
		      title: '大家都在用这款小工具管理项目，快来试试吧！！！',
		      path: '/pages/index/index'
		    }
		},
		methods: {
			initData(){
				var data = this.$dry.get("team_data");
				uni.removeStorageSync("team_data");
				if(data){
					var _this = this;
					this.isEdit = true;
					this.baseFormData.team.id = data.id;
					this.baseFormData.team.name = data.name;
					this.baseFormData.team.note = data.note;
					this.baseFormData.team.avatar = data.avatar == 0 ? 0 : data.avatar;
					this.baseFormData.team.avatarUrl = data.avatarUrl;
					this.baseFormData.team.openControl = data.openControl;
					this.baseFormData.team.auditLevel = data.auditLevel;
					this.baseFormData.images.push(data.avatarUrl);
				}
			},
			addImage(e){
				this.imageList = this.imageList.concat(e.paths);
				this.fileList = this.fileList.concat(e.files);
			},
			deleteImage(e){
				this.images.forEach(i => {
					if(i.url == e.currentImage){
						this.delId.push(i.id);
					}
				})
				for(let i = 0; i < this.imageList.length; i++){
					if(e.currentImage == this.imageList[i]){
						this.imageList.splice(i,1);
						i--;
					}
				}
				for(let j = 0; j < this.fileList.length; j++){
					if(e.currentImage == this.fileList[j].path){
						this.fileList.splice(j,1);
						j--;
					}
				}
			},
			changeOpenControl() {
				var that = this;
				if(that.baseFormData.team.openControl == 'CLOSE'){
					uni.showModal({
						title: "信息",
						content: "如果打开此功能，员工报销将按照您所设置的流程进行审核完成后才能报销，设置方法：团队管理->审核流程设置。如关闭此项，员工的报销单将由团队管理员进行审核与报销",
						success: function(res){
							if(res.confirm){
								that.baseFormData.team.openControl = 'OPEN';
							}
						}
					})
				}
				else{
					that.baseFormData.team.openControl = 'CLOSE';
					that.baseFormData.team.auditLevel = 0;
				}
			},
			submit() {
				this.$refs['baseForm'].validate().then(async res => {
					var fileLists = [];
					if(this.fileList.length > 0) {
						fileLists = await this.$oss.saveImages(this.fileList);
					}
					var token = this.$dry.getToken();
					if(token){
						uni.showToast({
							title: "正在提交",
							icon: "loading",
							duration: 1000
						});
						setTimeout(() => {
							if(fileLists.length > 0) {
								this.isClickUpload = true;
							}
							var data = [];
							if(this.isEdit){
								this.baseFormData.team.avatar = this.isClickUpload == true ? fileLists[0].id : this.baseFormData.team.avatar;
								this.baseFormData.team.avatarUrl = this.isClickUpload == true ? fileLists[0].url : this.baseFormData.team.avatarUrl;
							}
							else{
								this.baseFormData.team.avatar = this.isClickUpload == true ? fileLists[0].id : 0;
								this.baseFormData.team.avatarUrl = this.isClickUpload == true ? fileLists[0].url : '';
							}
							this.baseFormData.team.owner = this.$dry.get("user").userId;
							if(this.isEdit) {
								this.$request.addOrEdit("updateTeam",this.baseFormData.team,token,true);
							} else {
								this.$request.addOrEdit("addTeam",this.baseFormData.team,token,false);
							}
							uni.navigateBack({
								delta: 1
							})
						},1000);
					}
				}).catch(err => {
					console.log('err', err);
				})
			},
		}
	}
</script>

<style>

#switch-button {
		width: 114rpx;
		height: 64rpx;
		margin-top: -64rpx;
		border: none;
		outline: none;
		position: absolute;
		left: 128rpx;
		z-index: 99;
	}
</style>
